<template>
    <div class="coupon-pack-main">
        <div class="header">
            <img class="title" src="../../assets/redpack/title.png" alt="">
        </div>
        <img class="get-btn" @click="getpack" src="../../assets/redpack/getcou-btn.png" alt="">
        <img class="content" src="../../assets/redpack/content.png" alt="">
        <img class="title-1" src="../../assets/redpack/btn-1.png" alt="">
        <img class="title-2" src="../../assets/redpack/btn-2.png" alt="">
        <img class="footer" src="../../assets/redpack/footer.png" alt="">

    </div>
</template>
<script>
import {_receiveCoupon} from '../../service/coupon'
export default {
    data(){
        return{

        }
    },
    mounted(){
        // this.getpack()
    },
    methods:{
        getpack(){
            let _this=this
            let uid=JSON.parse(localStorage.getItem("user")).user_id
            _receiveCoupon({
                coupon_id:1,
                user_id:uid
            }).then(res=>{
                console.log(res)
                if(res.errcode==1){
                    // _this.$toast(res.message)
                    _this.$router.push("/myCoupon")
                }else{
                    // _this.$toast(res.message)
                    _this.$router.push("/myCoupon")
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.coupon-pack-main{
    width: 100%;
    height: 100vh;
    background-image: url('../../assets/redpack/getcou-bg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 15px;
    .title{
        width: 164px;
        margin-top: 54px;
    }
    .get-btn{
        width: 307px;
        display: block;
        margin: 38px auto 0 auto;
    }
    .content{
        width: 201px;
        display: block;
        margin: 10px auto 0 auto;
    }
    .title-1{
        width: 230px;
        margin-top: 93px;
    }
    .title-2{
        width: 282px;
        margin-top: 27px;
    }
    .footer{
        width: 116px;
        display: block;
        margin: 37px auto 0 auto;
    }
    @media only screen and (min-device-height: 600px) and (max-device-height: 690px) {
        .title{
            width: 164px;
            margin-top: 24px;
        }
        .content{
            width: 201px;
            display: block;
            margin: 0 auto 0 auto;
        }
        .title-1{
            width: 230px;
            margin-top: 29px;
        }
        .title-2{
            width: 282px;
            margin-top: 27px;
        }
        .footer{
            width: 116px;
            display: block;
            margin: 37px auto 0 auto;
        }
    }
}
</style>